﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Contact Card Example</title>


    <link href="../../sparkle_/css/2013/sparkle_jquery_ui.css" rel="stylesheet" />
    <link href="../../sparkle_/css/2013/sparkle.css" rel="stylesheet" />


    <style>
        .free-wall {
            margin: 5px;
        }
        .brick {
            width: 150px;
            background-color:#f0f0f0;
            margin:8px;
        }
        .info {
            padding: 8px;
            margin:0px;
            color:#666666;
        }
                .info p {
                    font-size: 10px;
                     margin:0px;
                    
                }
                    .info p.contact-name {
                        font-weight: bold;
                    }
        .brick img {
            margin: 0px;
            padding-left: 8px;
            padding-top:8px;
            display: block;
        }

    </style>
</head>

<body class="sparkle-xrm">
   

    <script src="../../ClientGlobalContext.js.aspx" type="text/javascript"></script>


    <!-- Sparkle Xrm dependancies -->
    <script src="../../sparkle_/js/SparkleXrmUI_Dependancies.js"></script>
    <script src="../js/freewall.js"></script>
    

    <!-- Sparkle Xrm -->
    <script src="../../sparkle_/js/mscorlib.js" type="text/javascript"></script>
    <script src="../../sparkle_/js/SparkleXrm.js" type="text/javascript"></script>
    <script src="../../sparkle_/js/SparkleXrmUI.js" type="text/javascript"></script>

    <!-- Client Code -->
    <script src="../js/Client.js" type="text/javascript"></script>


    <div id="freewall" class="free-wall">
        <div data-bind="template: {
            name: 'contact-template', foreach: contacts, as: 'contact',
            afterRender: Client.InlineSubGrids.Views.ContactCardView.onAfterRender
            }"></div>
    </div>
     <script type="text/html" id="contact-template">
         <div class="brick">
                 <img  data-bind="attr: { src: $root.getImageUrl(contact)}" width="32"  />
		        
		        <div class="info">
		            <p class='contact-name' data-bind="text: contact.fullname"></p>
                    <p data-bind="text: contact.jobtitle"></p>
                    <p data-bind="text: contact.parentcustomeridname"></p>
		            <p data-bind="text: contact.emailaddress1"></p>
                    <p data-bind="text: contact.telephone1"></p>
                    <p data-bind="text: contact.address1_city"></p>

		        </div>
		    </div>
    </script>
    <script type="text/javascript">
        Client.InlineSubGrids.Views.ContactCardView.init();
    </script>

</body>
</html>
